<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级作用域</title>
</head>
<body>
    <h1>块级作用域</h1>

    <script>
        // let取代var
        // bad
        var a = 1;
        var b = 2;

        // good
        let a = 1;
        const b = 2;

        // 全局常量和线程安全
        // bad
        var globalObj = {
            a: 1,
            b: 2
        };

        // good
        const globalObj = {
            a: 1,
            b: 2
        };

        // 块级作用域的使用
        // bad
        {
            var c = 3;
        }
        console.log(c); // 3

        // good
        {
            let d = 3;
        }
        // console.log(d); // ReferenceError

        // 实际应用示例
        function loadData() {
            const data = [];
            
            for (let i = 0; i < 3; i++) {
                const item = {
                    id: i,
                    value: `item ${i}`
                };
                data.push(item);
            }
            
            return data;
        }

        // 事件处理中的块级作用域
        const buttons = document.querySelectorAll('button');
        
        for (let i = 0; i < buttons.length; i++) {
            const button = buttons[i];
            button.addEventListener('click', () => {
                console.log(`Button ${i} clicked`);
            });
        }

        // IIFE改写为块级作用域
        // bad
        (function() {
            var tmp = 1;
            // ...
        }());

        // good
        {
            let tmp = 1;
            // ...
        }
    </script>
</body>
</html> 